/*
 * @Author: huyu
 * @Date: 2020-06-06 17:05:24
 * @Last Modified by: huyu
 * @Last Modified time: 2020-06-16 16:09:34
 */

// 博客文章详情页展示逻辑
import React, { Component } from "react"
import LayoutBlog from "../components/layoutBlog"
import SEO from "../components/SEO"
import style from "./blog-post.module.less"
import "./blog-post.css"
import "./github-markdown.css"
import "./prism-tomorrow.css"

export default class BlogPost extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 本文链接
      href: "",
    }
  }

  componentDidMount() {
    this._init()
  }

  _init() {
    this.setState({ href: document.location.href })
  }

  render() {
    const post = this.props.data.markdownRemark
    const {
      frontmatter: { title, date, tag },
      headings,
    } = post
    return (
      <LayoutBlog showNav title={title} headings={headings}>
        <SEO title={title} />
        <div className={style.main}>
          <h1>{title}</h1>
          <div className={style.ext}>
            <p>
              <span>文章标签：{tag ? tag.split(",").join("、") : "暂无"}</span>
              <span>发布时间：{date}</span>
            </p>
            <p>
              <span>版权声明：转载请附上原文出处链接。</span>
            </p>
            <p>
              <span>
                本文链接：
                <a target="_blank" href={this.state.href} rel="noreferrer">
                  {this.state.href}
                </a>
              </span>
            </p>
          </div>
          <div
            className="markdown-body"
            dangerouslySetInnerHTML={{ __html: post.html }}
          />
        </div>
      </LayoutBlog>
    )
  }
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        date
        tag
      }
      headings {
        id
        value
        depth
      }
    }
  }
`
